<template>
 <div id="app">
   <!-- <router-view></router-view> -->
   <loading v-show="isLoading"></loading>
   <!-- <videoX5 v-show="isStart" ref="startPage"></videoX5> -->
   <startPage v-show="isStart"></startPage>
 </div>
</template>
<style>
  html,body,#app{
    height: 100%;
  }
  .divSection{/*垂直居中样式表 最外层容器*/
    display: table;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
  }
  .pop{
    position:absolute;
    width: 100%;
    height: 100%;
    background-position: bottom center;
    background-size: 100% auto;
    z-index: 100;
  }
</style>
<script>
  import loading from "./components/Loading";
  import videoX5 from "./components/videoX5.vue";
  import startPage from "./components/StartPage.vue";

  export default{
    data(){
      return {
        isLoading:true,
        isStart:false,
        isTest:false,
        isResult:false,
        isProduct:false,
      }
    },
    components:{
      loading,
      videoX5,
      startPage,
    },
    mounted(){
      var vueAppThis = this.$root.vueAppThis;
      vueAppThis.$on("evt_load_complete",this.onLoadComplete);
      vueAppThis.$on("evt_enter_testPage",this.enterTestPage);
      vueAppThis.$on("evt_enter_resultPage",this.enterResultPage);
      vueAppThis.$on("evt_enter_productPage",this.enterProductPage);
    },
    methods:{
      onLoadComplete:function(){
       this.isLoading = false;
       this.isStart = true;
       //this.$refs.startPage.startShow();
     },
     enterTestPage:function(){
      this.isStart = false;
      this.isTest = true;
      //this.isProduct = true;
    },
    enterResultPage:function(){        
      this.isTest = false;
      this.isResult = true;
      this.$refs.resultPage.showResult();
    },
    enterProductPage:function(){       
      this.isResult = false;
      this.isProduct = true;
      //this.$refs.productPage.arrowAction();
    }
  }
}
</script>